<template>
	<div>
		<el-row>
			<el-col :span="16">
				<el-tag>展示区</el-tag>
				<div class="image_viewer">
					<el-image class="image_viewer_item" v-for="(item, index) in all_images" :key="item" :src="item"
						:preview-src-list="all_images" preview-teleported="true" fit="contain"></el-image>
				</div>
			</el-col>
			<el-col :span="1">
				<div style="border: gainsboro solid 1px; height: 100%; width: 2px"></div>
			</el-col>

			<el-col :span="7">
				<el-tag>上传区</el-tag>
				<el-upload ref="uploadRef" :multiple="true" list-type="picture-card" :auto-upload="false"
					:http-request="handleSubmit">
					<template #trigger>
						<el-button>选择</el-button>
					</template>
					<el-button type="success" @click="uploadRef.submit()">上传</el-button>
				</el-upload>
			</el-col>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { AddImage, GetObj } from '../api';
import { ref, onMounted } from 'vue';

const props = defineProps({
	// 传入的行数据,可以从中取到station等信息
	rowData: {
		type: Object,
		required: true,
	},
});

const all_images = ref<any>([]);

/******************展示区*********************/

const getImages = async () => {
	const res = await GetObj(props.rowData.row.id);
	// console.log('guowangbuliang----res:', res);
	all_images.value = res.data.images.map((item) => item.file_path);
	// console.log('all_images:', all_images);
};

onMounted(() => {
	getImages();
});

/******************上传区*********************/
const uploadRef = ref<any>(null);
// 上传文件
const handleSubmit = async (options: any) => {
	//ts-ignore
	// console.log(Object.keys(options));
	// console.log('uploadSubmit:options', options);
	// console.log('rowData:', props.rowData.row.station);
	const formData = new FormData();
	formData.append('file_path', options['file']);
	// formData.append('xxxxx', 'yyyyy');
	formData.append('station', props.rowData.row.station);
	formData.append('guowangbuliang_id', props.rowData.row.id);

	// console.log(formData);
	// const res = await AddImage(formData);
	// console.log('res:', res);
	AddImage(formData)
		.then((res: any) => {
			// console.log('res:', res);
			ElMessage.success('上传成功');
			getImages();
		})
		.catch((err: any) => {
			// console.log('err:', err);
			ElMessage.error('上传失败');
		});
};
</script>

<style lang="scss" scoped>
.image_viewer {
	display: flex;
	flex-wrap: wrap;

	.image_viewer_item {
		width: 100px;
		height: 100px;
		margin: 2px 5px;
	}
}
</style>
